<template>
	<div class="detaile-choose-info">
		<div class="chooseinfo-select">

			<div v-show="carRelation" class="service-car">
				<div class="service-car-title">服务车辆</div>
				<div class="service-car-content">
					<a ca="P_{{spuInfo.spuName}}$服务车辆" @click="selectCar">
						<span>{{carInfoDefault.carName ? carInfoDefault.carName : '请选择车型'}}</span>
						<span class="sf-arrow-right"></span>
					</a>
				</div>
			</div>


			<div class="service-car" v-if="saleAttrList">
				<div class="service-car-title">已选</div>
				<div class="service-car-content" @click="showSpec" ca="P_{{spuInfo.spuName}}$已选">
					<a >
						<span>
							<em v-for="(idx, item) in colorSize">
								{{item}} <i v-show="idx >= (colorSize.length-1) ? false : true">/</i>
							</em>
						</span>
						<span class="sf-arrow-right"></span>
					</a>
				</div>
			</div>
			<div v-if="storeInfoType" class="service-car">
				<div class="service-car-title">服务门店</div>
				<div class="service-car-content">
					<a ca="P_{{spuInfo.spuName}}$服务门店" @click="selectStore">
						<span>{{storeInfoDefalut.storeName}}</span>
						<span class="sf-arrow-right"></span>
					</a>
				</div>
			</div>
			<div class="explain clearfix" v-if="spuSellPoint">
				<div class="explain-content h_box"><em class="sf-tips"></em><span>{{spuSellPoint}}</span></div>
			</div>
		</div>
		<spu-common v-if="saleAttrList"></spu-common>
	</div>
</template>

<script>

//import spuCommon from '../common/spu-common';

export default {
	data() {
		return {
			spuId:sessionStorage.thisSpuId,
			spuInfo : {},  // 商品
			storeInfoDefalut : { // 门店
				storeName: '正在加载中'
			}, 
			carInfoDefault: { // 车型
				carName: '请选择车型'
			},
			spec: '', // 已选 功能
			colorSize: '', // 尺寸 ,颜色 
			isRed: true,
			spuCode: '', // spuCode
			saleAttrList: '',
			targetUrl: '', // 返回的url.
			carRelation:'',
			chooseInfo:'',
			spuSellPoint:'',
			thisCodes:'',
			storeInfoType:false
		}
	},
	props: ['typename'],
	components: {
		'spuCommon': function ( resolve, reject ) {
				require.ensure(['../common/spu-common'], function ( require ) {
					resolve(require('../common/spu-common'));
				}, 'spucommon');
		}
	},
	methods: {

		// 已选
		showSpec() {
			
			if (this.spec == '') {
				this.spec = 'spuCommon';
			}else {
				this.$broadcast('spu-common-show', 1); // 0未选中 1选中  2不存在
			}

		},
		/**
		 * 选择车辆
		 */
		selectCar: function () {
			window.location.replace('/selectCar/redirect.htm?targetUrl=' + this.targetUrl);
		},
		/**
		 * 选择门店
		 */
		selectStore: function () {
			window.location.replace('/store/mylist.htm?forwardUrl='+ this.targetUrl + '&' + this.thisCodes);
		}
	},
	events: {
		//  设置消息
		chooseInfoDataEvent: function ( chooseInfo ) {
			this.thisCodes = '';
			if(!chooseInfo)return;	
			if(chooseInfo.type == 'useCard'){

				this.carRelation = true;
				this.thisCodes = 'ssCodes='+sessionStorage.cardServerCodeList;

			}else{

				var colorSize = [];

				this.chooseInfo = chooseInfo;
				// 设置值
				this.spuInfo = chooseInfo.spuInfo;
				
				this.saleAttrList = chooseInfo.spuInfo.saleAttrList;

				this.spuSellPoint = chooseInfo.spuInfo.spuSellPoint;

				var defText =[],attrValue = this.spuInfo.attrValue;

				this.thisCodes = 'spuCode='+this.spuInfo.spuCode;				

				//强弱关联关系，1为强关联   0为弱关联     否则无关联   
				this.carRelation = (this.spuInfo.carRelation=='1'||this.spuInfo.carRelation=='2')?true:false;

				if(!attrValue)return;
				for(var i=0,len=attrValue.length;i<len;i++){
					defText.push(this.spuInfo.attrMap[attrValue[i]]);
				}

				this.colorSize = sessionStorage.colorSize == undefined ? defText : JSON.parse(sessionStorage.colorSize);



			}		
		



			

		},
		initStoreData: function ( storeInfo, carInfo ) {

			

			if(!storeInfo){

				this.storeInfoType = false;

			}else{

				this.storeInfoType = true;
				this.storeInfoDefalut = storeInfo;

			}

			this.carInfoDefault = carInfo;
			
			try{
				// 设置文字长度
				if ( carInfo.carName.length > 15 ) {
					this.carInfoDefault.carName = carInfo.carName.substr(0, 16) + '...';   
				}
			}catch(e){
			}

			// 传递子组件 到spu-common
			this.$broadcast('spuCommonDataEvent', this.chooseInfo,storeInfo);
		},
		'changeSkuText': function (skutext,selectVd) {
			
			sessionStorage.colorSize = JSON.stringify(skutext);
			sessionStorage.selectVd = JSON.stringify(selectVd);

			this.colorSize = '';
			//this.$set('colorSize', skutext);
			this.colorSize = skutext;
		}
	},
	ready: function () {
		
		
		// 处理返回路径
		var temp = window.location.hash,
			num = temp.indexOf('?userInfo');
		if(temp.indexOf("userInfo=")>-1){
			temp = temp.substr(0,num);
			//temp= temp.replace('userInfo=','').replace('carInfo=','');
		}
		var num = temp.indexOf('?carInfo');
		if(temp.indexOf("carInfo=")>-1){
			temp = temp.substr(0,num);
			//temp= temp.replace('userInfo=','').replace('carInfo=','');
		}

		var backUrl = window.location.pathname + temp;		
		this.targetUrl = encodeURIComponent(backUrl);

		
	}
}

</script>

<style lang="scss">
	
@import '../../assets/css/_variables.scss';
@import '../../assets/css/_functions.scss';

	.detaile-choose-info {
		background: $_fff;
		font-size: 13px;
		.service-car {
			height: rem(55);
			line-height: rem(55);
			margin: rem(0) rem(20);
			border-bottom: 1px solid $_eee;
			overflow:hidden;
			.service-car-title {
				width: rem(100);
				font-size: rem(14);
				float:left;
			}
			.service-car-content {
				text-align: right;
				.selectSku{
					span{
						display: inline-block;
						line-height: rem(43);
					}
					max-width: rem(260);
					height: rem(43);

					overflow:hidden;
					display: inline-block;
					float: left;
					text-align:right;
				}
				.lose {
					background: $_ff6600;
					color: $_fff;
					border-radius: rem(2);
					padding: rem(1);
					font-size: rem(10);
				}
				.no-adaptation {
					background: $_ff0000;
					color: $_fff;
					font-size: rem(10);
					margin-right: rem(8);
					padding: 0 rem(2);
				}
				.service-car-content-txt {
					color: $_price;
				}
				a {
					width:23rem;
					color: $blue-new;
					display: inline-block;
					height: 100%;
					// padding-right:rem(20);
					float: right;
					box-sizing: border-box;
					overflow: hidden;
				}
			}
		}
		.service-car:last-child{
			border-bottom:0;
		}
		.explain {
			line-height: rem(40);
			.explain-content {
				line-height: rem(16);
				color: #8392a0;
				font-size: rem(12);
				padding:rem(16) rem(20);
				display:inline-block;
				.sf-tips {
					width: rem(15);
					display: block;
					margin-right: rem(2);
					font-size: rem(12);
					float: left;
				}
				span{
					display: block;
					margin-left: rem(20);
				}
			}
		}
	} 	
	.sf-arrow-right {
		display: inline-block;
		vertical-align: middle;
		margin-left: rem(4);
	}
</style>